import { Flex } from 'antd';
import IndexPeople from '../components/IndexPeople'
import Echarts from '../components/echarts'
import {useState} from 'react'
import HotRank from '../components/HOTrank'
import Registeredpersons from '../components/Registeredpersons';

function Indexcontent() {
    //热门排行可视化数据
    const [dorctor]=useState(['黄医生', '刘医生', '张医生', '王医生', '李医生'])   
    const [department]=useState(['眼科','骨科','耳鼻喉科','呼吸内科','门诊外科'])
    const [dataefficty]=useState([150, 220, 280, 350, 450])
    // 获取日期值
    const getdata=(data:Array<string>)=>{
        console.log(data,1111)
    }
    // 公告
    const [item]=useState([1,2,3,4,5,6,7,8])
    return ( 
        <div style={{padding:'20px 17px'}}>
            <Flex justify='space-between'>
                <IndexPeople paths="挂号">
                    <span>今日挂号人数</span>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E7%B3%BB%E7%BB%9F%E9%A6%96%E9%A1%B5/u2006.png" alt="" />
                    <span>266</span>
                    <span>较昨日减少 20人</span>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E7%B3%BB%E7%BB%9F%E9%A6%96%E9%A1%B5/u1284.svg" alt="" />
                </IndexPeople>
                <IndexPeople paths="退号">
                    <span>今日退号人数</span>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E7%B3%BB%E7%BB%9F%E9%A6%96%E9%A1%B5/u2008.png" alt="" />
                    <span>66</span>
                    <span>较昨日减少 20人</span>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E7%B3%BB%E7%BB%9F%E9%A6%96%E9%A1%B5/u1284.svg" alt="" />
                </IndexPeople>
                <IndexPeople paths="建档">
                    <span>今日建档人数</span>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E7%B3%BB%E7%BB%9F%E9%A6%96%E9%A1%B5/u2007.png" alt="" />
                    <span>150</span>
                    <span>较昨日减少 20人</span>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E7%B3%BB%E7%BB%9F%E9%A6%96%E9%A1%B5/u1284.svg" alt="" />
                </IndexPeople>
                <IndexPeople paths="注销">
                    <span>今日注销人数</span>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E7%B3%BB%E7%BB%9F%E9%A6%96%E9%A1%B5/u2009.png" alt="" />
                    <span>2</span>
                    <span>较昨日减少 20人</span>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E7%B3%BB%E7%BB%9F%E9%A6%96%E9%A1%B5/u1284.svg" alt="" />
                </IndexPeople>
            </Flex>
            <Flex justify='space-between' style={{marginTop:'20px'}}>
                <Registeredpersons/>
                <div style={{width:260,height:384,
                        backgroundColor:'#fff'
                }} >
                    <div style={{
                        width:'100%',
                        height:'50px',
                        padding:'0 20px',
                        borderBottom:'1px solid rgba(242, 242, 242, 1)',
                        boxSizing:'border-box',
                        display:'flex',
                        alignItems:'center',
                        justifyContent:'space-between'
                    }}>
                        <span style={{
                            fontSize:14,
                            color:'#000',
                            fontWeight:700
                        }}>公告栏目</span>
                        <span style={{
                            fontSize:12,
                            color:'#7f7f7f'
                        }}>更多</span>
                    </div>
                    <ul style={{
                        padding:'10px 0'
                    }}>
                        {
                            item.map(item=>(
                                <li key={item} style={{
                                    padding:'0 20px',
                                    display:'flex',
                                    alignItems:'center',
                                    lineHeight:'38px',
                                    justifyContent:'space-between'
                                }}>
                                    <span style={{
                                        fontSize:'14px',
                                        color:'#555'
                                    }}>请各单位注意月底绩...</span>
                                    <span style={{
                                        fontSize:'14px',
                                        color:'#555'
                                    }}>06-12</span>
                                </li>
                            ))
                        }
                        
                    </ul>
                </div>
            </Flex>
            <Flex justify='space-between' style={{marginTop:'20px'}}>
                <HotRank sendDate={getdata}>
                    <span>热门医生排行(前五)</span>
                    <Echarts yAxis={dorctor} name='医生' dataefficty={dataefficty}></Echarts>
                </HotRank>
                <HotRank sendDate={getdata}>
                    <span>热门科室排行(前五)</span>
                    <Echarts yAxis={department} name='科室' dataefficty={dataefficty}></Echarts>
                </HotRank>
            </Flex>
        </div>
     );
}

export default Indexcontent;